<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
        * {
            padding: 0px;
            padding: 0px;
        }

        body {
            background: linear-gradient(45deg, rgb(160, 191, 124), rgb(255, 255, 255)) fixed;
        }
        #logoimg{
                width: 300px;
                height: 300px;
                margin: -69px; 
            }  
            #logoimg p{
                position: relative;
                top:-76px;
                left:81px;
                color:rgb(64, 116, 52);
            } 
        
        .mylogin {
            width: 300px;
            height: 300px;
            border: 1px solid rgb(160, 191, 124);
            border-radius: 10px;
            /* margin:100px 700px; */
            position: absolute;
            top:-10px;
                left: 60%;
            margin-top: 150px;
            background-color: white;
            color: rgb(64, 116, 52)
        }

        .mylogin p {
            font-size: 20px;
            font-weight: bolder;
            margin-top: 30px;
            margin-left: 100px;
        }

        form {
            margin-left: 30px;
            margin-top: 50px;
        }

        label {
            height: 50px;
            line-height: 50px;
        }

        #btnLogin {
            margin: 20px 60px 0;
            border: none;
            outline: none;
            width: 40%;
            height: 30px;
            border-radius: 15px;
            background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
            box-shadow: 0 0 3px rgb(64, 116, 52);
            cursor: pointer;
            color: white;

        }
        .mylogin a{
            font-size:12px;
            text-decoration: none;
            color:rgb(64, 116, 52);
            position: relative;
            top:10px;
            left:200px;
        }
    </style>
    <script>
        function login() {
            var userName = document.querySelector("#txtName").value;
            var userPassword = document.querySelector("#txtPassword").value;
            var users = JSON.parse(localStorage.getItem("users"));
            for (var i = 0; i < users.length; i++) {
                if (users[i].name == userName && users[i].password == userPassword) {
                    localStorage.setItem('loginName', userName);
                    alert("登录成功！");
                    location.href = "shouye.html"
                    return
                }
            }
            alert('用户名、密码错误，请重新输入！')
        }
    </script>
</head>

<body>
    <div>
            <div id="logoimg">
                    <img src="images/logo.png" alt="">
                    <p>一年四季，一日三餐</p>
                </div>
            <div class="mylogin">
                    <p>用户登录</p>
                    <form action="#">
                        <label for=""> 手机号：</label>
                        <input type="text" name="" id="txtName" placeholder="请输入用户名" required><br>
                        <label for=""> 密&nbsp;&nbsp;&nbsp;码：</label>
                        <input type="password" name="" id="txtPassword" placeholder="请输入密码" required><br>
                        <input type="button" name="" id="btnLogin" value="登录" onclick="login()">
                    </form>
                    <a href="register.html">注册</a>
                    <a href="shouye.html">返回首页</a>
                </div>
    </div>
    
</body>

</html>